<layout name="site" />
<style type="text/css">
  html {
    height: 100%;
  }
  body {
    background-color: #3c3c3c;
    color: #ebebeb;
    font-size: 1.2rem;
    text-shadow: 1px 1px 5px rgba(0,0,0,.5);
    height: 100%;
    overflow: hidden;
  }
  .slide { display:none;}
  .fro-intro {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0; z-index: 10;
    margin: auto;
    width: 80%;
    height: 250px;
    padding: 10px;
    border: 1px solid #113D69;
    border-radius: 10px;
    background-color: #f5f5f5;
    color: #333;
    text-shadow: none;
    box-shadow: 0 0 20px rgba(255,255,255,0.8);
  }
  .fro-intro > div {
    height: 190px;
    overflow: hidden;
  }
  .fro-intro h3 {
    height: 20px;
    line-height: 20px;
    margin: 10px 0;
  }
  .fro-intro p {
    text-indent: 2em;
  }
  .fro-intro .start {
    display: block;
    width: 80%;
    margin: 0 auto;
    border-radius: 5px;
    padding: 8px 0;
    text-align: center;
    border: 1px solid #0099cc;
    background-color: #09c;
    color: #fff;
  }
  .result {
    display: none;
  }
  .content {
    position: relative;
    height: 85%;
    width: 100%;
    overflow: hidden;
  }
  .up-part, .down-part {
    position: relative;
    width: 100%;
    height: 50%;
    z-index: 5;
    top: 0;
  }
  .hand {
    position: absolute;
    left: 50%;
    background: #3c3c3c url(__STYLE__/Activity/Shake/shake_hand.png) no-repeat;
    width: 150px;
    height: 75px;
    -webkit-transform: translate(-50%, 0);
       -moz-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
  footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 15%;
  }
  footer .intro {
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
  }
  footer .intro p {
    text-align: center;
  }
  footer .copr {
    position: absolute;
    bottom: 0;
    right: 5px;
    color: #888888;
  }
  .no-support-shake {
    background: #0099cc;
    border: none;
    color: #fff;
    padding: 2px 10px;
    border-radius: 3px;
  }
  .inset {
    position: absolute;
    width: 200px;
    height: 165px;
    padding: 5px 0;
    text-align: center;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .gift {
    width: 150px;
    height: 125px;
    margin: 0 auto;
    background: url(__STYLE__/Activity/Shake/wmfl_shake_gift.png) no-repeat;
    background-position: 0 0;
  }
  .info {
    color: #fff;
    text-shadow: none;
    height: 20px;
    line-height: 20px;
    display: none;
    overflow: hidden;
  }
  #again {
    display: block;
    color: #fff;
    text-decoration: none;
  }
  
  .up-part .hand {
    background-position: 0 0;
    bottom: 0;
  }
  .down-part .hand {
    background-position: 0 -75px;
    top: 0;
  }
  
  /* welcomeStatus */
 .fro-intro.welcome {
    display: none;
  }
  .content.welcome {
    display: block;
  }
  
  /* initStatus */
 .fro-intro.shake{
    display: block;
  }
  .content.init {
    display: none;
  }
  .content.shake .up-part {
    border-bottom: none;
  }
  .content.shake .down-part {
    border-top: none;
  }
  .content.shake .gift {
    background-position: 0 0;
  }
  .content.shake .prize,
  .content.shake .info {
    display: none;
  }
  
   /* shakeStatus */
  .fro-intro.shake{
    display: none;
  }
  .content.shake {
    display: block;
  }
  .content.shake .up-part {
    border-bottom: 3px solid #ebebeb;
    top: -30%;
  }
  .content.shake .down-part {
    border-top: 3px solid #ebebeb;
    top: 30%;
  }
  .content.shake .gift {
    background-position: 0 0;
  }
  .content.shake .prize,
  .content.shake .info {
    display: block;
  }
  
  /* openStatus */
  .fro-intro.open {
    display: none;
  }
  .content.open {
    display: block;
  }
  .content.open .up-part {
    border-bottom: 3px solid #ebebeb;
    top: -30%;
  }
  .content.open .down-part {
    border-top: 3px solid #ebebeb;
    top: 30%;
  }
  .content.open .up-part .hand {
    
  }
  .content.open .prize,
  .content.open .info {
    display: block;
  }
  .content.open .gift {
    background-position: 0 -127px;
  }
</style>
</head>
  
<audio preload="auto" id="shake-sound" src="__STYLE__/Activity/Shake/Apologize.mp3"></audio>
<audio preload="auto" id="shake-success" src="__STYLE__/Activity/Shake/shake_match.mp3"></audio>

<!--{:dump($activity)}-->

<div id="fro-intro" class="fro-intro">
  <div>
    <h3>活动说明：</h3>
    <p>{$activity.intro}</p>
    <h3>奖项设置：</h3>
    <volist name="activity.prize_config" id="vo">
    <p><span>{$vo.title}</span>&nbsp;&nbsp;共<b>{$vo.total}</b>名&nbsp;&nbsp;奖品为<b>{$vo.prizeName}</b></p>
    </volist>
  </div>
  <span class="start">即刻开始摇一摇！</span>
</div>

<div id="content" class="content">
  <div class="inset">
    <div id="gift" class="gift"></div>
    <p id="info" class="info"></p>
  </div>
  
  <section class="up-part">
    <div class="hand"></div>
  </section>
  
  <section class="down-part">
    <div class="hand"></div>
  </section>
  
</div>

<footer>
  <div class="intro">
    <p id="shake-info">摇妹子，摇帅哥，摇礼物。您今天还可以摇 <span id="times">{$activity.remainTimes}</span>次</p>
  </div>
  <div class="copr">本页面由观元科技提供</div>
</footer>


<script type="text/javascript">
  
  // 选择器
  var $ = function ( selector ) {
    var isId = new RegExp( /^#/ ).test( selector );
    if ( isId ) {
      return document.getElementById( selector.replace(/^#/, "") );
    } else {
      return document.querySelector( selector );
    };
  };
  
  var $$ = function ( selector ) {
    return document.querySelectorAll( selector )
  };
  
  // 重新设置audio的src
  var oSound = $( "#shake-sound" ),
      oShakeMatch = $( "#shake-success" );
  $("#shake-sound").setAttribute( "src", "__THEME__shake_sound.mp3" );
  
  var oFroIntro = $( "#fro-intro" ),
      oContent = $( "#content" ),
      oIntro = $("#shake-info");
  
  var oGift = $("#gift"),
      oStart = $(".start"),
      oInfo = $("#info"),
      oTimes = $("#times");
      
  var times = 5, //times = {$activity.remainTimes},
      prize = 0,//prize = {$activity.activityRecord.prize},
      prizeCn = "{$activity.activityRecord.title}";
  
  // 重力感应支持的判断
  if( window.DeviceMotionEvent ) {
    window.addEventListener( "devicemotion", deviceMotionHandler, false );  
  } else {
    oIntro.innerHTML = "(⊙o⊙)哦！非常抱歉，您的手机不支持摇一摇功能。<p><button class='no-support-shake'>您还可以点我一下试试^_^</button></p>";
    $(".no-support-shake").onclick =  function() {
      shakeStatus();
      this.style.display = "none";
    }
  };
  
  // 摇一摇变量控制
  var SHAKE_THRESHOLD = 1000,  
      last_update = 0,
      x, y, z, last_x, last_y, last_z, 
      shaked = start = false;
      
  // 摇一摇控制函数
  function deviceMotionHandler( eventData ) {
    var acceleration = eventData.accelerationIncludingGravity;  
    var curTime = new Date().getTime();
    if ( (curTime - last_update) > 100 ) {
      var diffTime = curTime -last_update;  
      last_update = curTime;
      x = acceleration.x;
      y = acceleration.y;
      z = acceleration.z;
      var speed = Math.abs( x +y + z - last_x - last_y - last_z ) / diffTime * 10000;  
      if (speed > SHAKE_THRESHOLD && !shaked && start) {
        shakeStatus();
      };
      last_x = x;  
      last_y = y;  
      last_z = z;  
    };
  };
  
  // 摇奖开始前的判断
  if ( prize ) {
    openStatus();
    oIntro.innerHTML = "恭喜您获得" + prizeCn + "，请快去领奖吧O(∩_∩)O";
  } else if ( times === 0 ) {
    oIntro.innerHTML = "很抱歉，您今天的摇奖次数已用完";
    oFroIntro.style.display = "none";
    shaked = true;
  } else {
    oStart.addEventListener( "click", welcomeStatus, false );
  };
  
  // 初始状态
  function welcomeStatus() {
    oFroIntro.setAttribute( "class", "fro-intro welcome" );
    oContent.setAttribute( "class", "content welcome" );
    start = true;
  };
  
  // 摇动后状态
  function shakeStatus() {
    oFroIntro.setAttribute( "class", "fro-intro shake" );
    oContent.setAttribute( "class", "content shake" );
    playSound();
    
    oInfo.innerHTML = "点击礼盒打开";

    times--;
    oTimes.innerHTML = times;
    
    var sid = {$sid},
        id = {$activity.id};

    GH.ajax( "__CONTROLLER__/savePost", { "sid": sid, "id": id }, function( data ) {
      if ( data.error ) {
        oInfo.innerHTML = data.error;
      } else {
        var prize = data.prize ? ( "恭喜您获得" + data.title + "快去领奖吧！" ) : ( "很遗憾您没有中奖，祝您下次好运" );
        oGift.addEventListener( "click", function(){
          giftClick( prize ); 
        }, false );
      };
    });
    shaked = true;
  };
  
  function giftClick ( prize ) {
    oShakeMatch.play();
    openStatus();
    oInfo.innerHTML = prize;
  };
  
  function openStatus() {
    oFroIntro.setAttribute( "class", "fro-intro open" );
    oContent.setAttribute( "class", "content open" );
    
    var oAgain = $("#again");
    if( oAgain ) {
      oAgain.onclick = reset;
      if( times == 0 ) {
        shaked = true;
      } else {
        shaked = false;
      }
    };
  };
  
  function reset() {
    oFroIntro.setAttribute( "class", "fro-intro init" );
    oContent.setAttribute( "class", "content init" );
  };
  
  function css ( obj, attr, value ) {
    switch( arguments.length ) {
      case 2: 
        if ( typeof arguments[1] === "string" ) {
          return getComputedStyle ( obj, false ) [ attr ]; //1
        } else {
          for ( var i in arguments[1] ) { obj.style[i] = attr[i]; } //3
        }
        break;
      case 3:
        obj.style[attr] = value; //2
        break;
      default:
        console.log( "参数传入错误" );
        break;
    };
  };
  
  // 运动函数
  function move( obj, attr, target, fnEnd ) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
      var cur = parseInt( css(obj, attr) );
      var speed = ( target - cur ) / 5;
      speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );
      cur == target ? clearInterval(obj.timer) : obj.style[attr] = cur + speed + "px";
    }, 30)
    fnEnd && fnEnd();
  };
  
  // 播放声音
  function playSound() {
    oSound.play();
    oSound.ended && oSound.load();
  };
  </script>